<template>
  <LayoutContent>
    <!-- 搜索条件 -->
    <div class="form">
      <el-form :inline="true" :model="form">
        <el-form-item label="操作人:">
          <el-input v-model="form.name" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" @click="handleClick('select')">搜索</el-button>
          <el-button type="primary" size="small" @click="handleClick('rest')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <BasicTable :columns="columns" border :tableData="tableData" :page="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
        <template #operation="{ row }">
          <el-button link type="primary" size="small" @click="handleClick('delete', row.id)">删除</el-button>
        </template>
      </BasicTable>
    </div>
  </LayoutContent>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getLogListApi, deleteApi } from '@/api/log/index'

// 表格
const tableData = ref([])
const columns = [
  {
    prop: 'id',
    label: 'id',
  },
  {
    prop: 'des',
    label: '描述',
  },
  {
    prop: 'createTime',
    label: '操作时间',
    sort: true,
  },
  {
    prop: 'updateTime',
    label: '更新时间',
    sort: true,
  },
  {
    width: 100,
    prop: 'operation',
    label: '操作',
  },
]
const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10,
})

const getList = async () => {
  const res = await getLogListApi({ ...page.value, ...form.value })
  if (res.code == 200) {
    tableData.value = res.data.records
    page.value.total = res.data.total
  } else {
    ElMessage.error(res.msg)
  }
}

onMounted(() => {
  getList()
})

const form = ref({ name: '' })

const handleCurrentChange = (value) => {
  page.value.currentPage = value
  getList()
}
const handleSizeChange = (value) => {
  page.value.pageSize = value
  getList()
}

// 删除
const deleteData = async (id) => {
  const res = await deleteApi({ id })
  if (res.code == 200) {
    getList()
    ElMessage.success(res.msg)
  } else {
    ElMessage.error(res.msg)
  }
}

const handleClick = (type, id) => {
  switch (type) {
    case 'delete':
      deleteData(id)
      break
    case 'select':
      selectData()
      break
    case 'rest':
      form.value = {}
      page.value = { currentPage: 1, pageSize: 10, total: 10 }
      getList()
      break
  }
}
const selectData = () => {
  getList()
}
</script>

<style scoped lang="scss">
.card {
  height: 100%;
}
:deep(.el-form-item__content) {
  min-width: 200px;
}
</style>
